<template>
  <div class="yueTransfer">
    <div class="content">
      <div class="left">
        <div class="title">提现至我的结算卡</div>
        <div
          class="hint"
          v-if="
            getUserInfo().userType !== 'main_admin' &&
            getUserInfo().userType !== 'main_user'
          "
        >
          商户可提现我的钱包余额到已设置的结算卡
        </div>
        <div class="card">
          <img src="@/assets/imgs/checkAccount/cashout.png" alt="" />
        </div>
      </div>

      <div class="right">
        <el-form
          ref="withdrawForm"
          :model="form"
          :rules="rules"
          label-position="top"
        >
          <el-form-item label="提现渠道">
            <el-select
              v-model="form.payformChannel"
              placeholder="请选择"
              filterable
              class="width512"
              @change="setName"
            >
              <el-option
                v-for="(item, index) of channelList"
                :key="index"
                :label="item.channelName"
                :value="item.channel"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="channel-desc">
            <div class="channel-img">
              <img
                :src="
                  require(`@/assets/imgs/checkAccount/${
                    channelImg[cInfo.channel]
                  }.png`)
                "
              />
            </div>
            <div class="channel-count">
              <div class="tit">可提现金额</div>
              <div class="count">¥{{ cInfo.withdrawableBalance }}</div>
            </div>
          </div>

          <el-form-item label="提现金额" prop="fmtCashAmt" class="diyUi">
            <el-input
              title=""
              @keydown.native="inputKeyDown"
              v-model="form.fmtCashAmt"
              placeholder=""
              class="width512"
              type="number"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
          <div class="mount-desc">
            提现金额不可超过
            <span style="color: #03bfc6">¥{{ cInfo.withdrawableBalance }}</span>
          </div>
          <div
            class="tiptip"
            v-if="
              (getUserInfo().userType == 'main_admin' ||
                getUserInfo().userType == 'main_user') &&
              cInfo.channel != 'douyin'
            "
          >
            结算卡为您在{{
              cInfo.channel == "ada"
                ? "汇付"
                : cInfo.channel == "wechat"
                ? "微信"
                : "支付宝"
            }}留存的结算银行卡，请知悉。
          </div>
          <el-form-item
            label="结算卡"
            prop="cardNo"
            v-if="
              getUserInfo().userType != 'main_admin' &&
              getUserInfo().userType != 'main_user' &&
              cInfo.channel != 'douyin'
            "
          >
            <el-input
              v-model="form.cardNo"
              placeholder="请输入结算卡号"
              disabled
              class="width512"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="账户名称" prop="cardName">
            <el-input
              v-model="form.cardName"
              placeholder="请输入账户名称"
              disabled
              class="width512"
            ></el-input>
          </el-form-item>

          <el-form-item label="开户银行" prop="bankName">
            <el-input
              v-model="form.bankName"
              placeholder="请输入开户银行"
              disabled
              class="width512"
            ></el-input>
          </el-form-item> -->

          <!-- <el-form-item label="转出渠道">
            <el-select
              style="width: 130px"
              placeholder="请选择转出渠道"
              v-model="form.payformChannel"
              @change="handleChannel"
            >
              <el-option
                v-for="item of channelList"
                :key="item.channel"
                :label="item.channelName"
                :value="item.channel"
              ></el-option>
            </el-select>
            <span class="use">可提现余额：{{ lastAvlBalance }}</span>
          </el-form-item> -->

          <!-- <el-form-item label="预估手续费">
            <el-input v-model="form.name" placeholder="请输入" class="input_" style="width: 490px"></el-input>
            <span class="rules">收费规则</span>
        </el-form-item> -->
          <!-- <el-form-item label="提现渠道" prop="money2">
            <el-select
                  v-model="region"
                  class="input_"
                  placeholder="请选择区"
                  >
                  <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
        </el-form-item> -->

          <div style="margin-top: 55px">
            <el-form-item>
              <el-button
                class="width120"
                @click="() => this.$backTo('/account/wallet')"
                >返回</el-button
              >
              <el-button
                type="primary"
                class="width120"
                @click="goCode('SMS_BUSINESS_WITHDRAWAL')"
                >提交</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <codeDialogVue
      codeId="11"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import { isAmount } from "@/utils/validate";
import { getUserInfo } from "@/utils/public";
import { mapMutations } from "vuex";

export default {
  name: "withdrawVue",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      channelList: [], //渠道列表
      cInfo: {
        channel: "ada",
        withdrawableBalance: 0,
      },
      channelImg: {
        wechat: "c3",
        ali: "c2",
        ada: "c1",
        douyin: "c4",
        // fuiou: "富友",
      },
      codeItem: "",
      codeType: "",
      codeDialog: false,
      lastAvlBalance: "",
      form: {
        payformChannel: "channel",
        cardNo: "",
        fmtCashAmt: "",
      },
      originalCardNo: "",
      rules: {
        fmtCashAmt: [
          { required: true, message: "请输入提现金额", trigger: "change" },
          { validator: this.checkAmount, trigger: "change" },
        ],
        // cardNo: [
        //     { required: true, message: '请输入收款账号', trigger: 'change' },
        // ],
        // cardName: [
        //     { required: true, message: '请输入账户名称', trigger: 'change' },
        // ],
        // bankName: [
        //     { required: true, message: '请输入开户银行', trigger: 'change' },
        // ],
      },
    };
  },
  created() {
    this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
      if (res.code === "0000") {
        this.channelList = res.data.channelInfo
          .map((item) => ({
            ...item,
            channelName: this.CHANNEL_TYPE[item.channel],
          }))
          .filter((item) => item.channel == "ada" || item.channel == "douyin");
        console.log(this.channelList);
        this.form.payformChannel = res.data.channelInfo[0].channel;
        this.lastAvlBalance = res.data.channelInfo[0].lastAvlBalance;
        // console.log(res.data.channelInfo[0].memberBank.cardNo)
        this.form.cardNo = res.data.channelInfo[0].memberBank
          ? res.data.channelInfo[0].memberBank.cardNo
          : "";
        this.originalCardNo = res.data.channelInfo[0].memberBank
          ? res.data.channelInfo[0].memberBank.originalCardNo
          : "";
        this.getInfo();
        // this.getBankInfo();
      }
    });
  },
  watch: {
    "$store.state.testLine": {
      handler(val) {
        if (this.$route.name == this.$options.name) {
          if (val) {
            this.$store.commit("changeTestMode", true);
          }
        }
      },
    },
    deep: true,
  },
  methods: {
    ...mapMutations(["changeLive"]),
    getUserInfo,
    inputKeyDown(event) {
      const { key } = event;
      const filterValue = ["e", "+", "-"];
      if (filterValue.includes(key)) {
        event.returnValue = false;
        return false;
      }
      return true;
    },
    setBanlance(c) {
      const cInfo = this.channelList.find((item) => item.channel == c);
      this.cInfo = cInfo;
      console.log(this.cInfo)
    },
    getInfo() {
      // const channel = this.$route.query.channel;
      //   const channelInfo = this.$route.query.item;
      // if (channel) {
      //   this.form.payformChannel = channel;
      //   this.setBanlance(channel);
      // }
      this.setBanlance('ada');
    },
    setName(val) {
      //console.log(val);
      this.form = {
        payformChannel: val,
        cardNo: "",
        fmtCashAmt: "",
      };
      this.setBanlance(val);
      // this.form.fmtCashAmt = ""; //重置金额
      setTimeout(() => {
        this.$refs.withdrawForm.clearValidate();
      }, 0);
      // this.resetForm("withdrawForm");
    },
    codeStateFn(val) {
      if (val) {
        this.submit();
      }
    },
    goCode(val) {
      this.$refs.withdrawForm.validate((valid) => {
        if (valid) {
          if (getUserInfo().checkFlag) {
            this.submit();
          } else {
            this.codeType = val;
            this.codeDialog = true;
          }
        }
      });
    },
    handleChannel(val) {
      this.lastAvlBalance = this.channelList.find(
        (item) => item.channel === val
      ).lastAvlBalance;
    },
    checkAmount(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入提现金额"));
      } else if (
        Number(value) > Number(this.cInfo.withdrawableBalance) &&
        (this.cInfo.channel == "ada" || this.cInfo.channel == "douyin")
      ) {
        callback(new Error("不能大于可用余额"));
      } else if (!isAmount(value)) {
        callback(new Error("金额必须为整数或者保留两位小数"));
      } else if (Number(value) > 99999999.99) {
        callback(new Error("超出最大输入限制"));
      } else if (value <= 0) {
        callback(new Error("金额必须大于0"));
      } else {
        callback();
      }
    },
    getBankInfo() {
      //console.log(this.form.payformChannel);
      this.$http
        .get("/api/merchant/memberbank/getCurrentAccount", {
          params: {
            performChannel: this.form.payformChannel,
          },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.form.cardNo = res.data.cardNo;
            this.form.cardName = res.data.cardName;
            this.form.bankName = res.data.bankName;
          }
        });
    },
    submit() {
      this.$http
        .post(`/api/merchant/settleBalanceDrawcash/add`, {
          ...this.form,
          cardNo: this.originalCardNo,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("提现申请成功！");
            this.testCancel();
            // this.$backTo("/account/wallet");
          }
        });
    },
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/account/wallet");
    },
  },
};
</script>

<style lang="scss" scoped>
.yueTransfer {
  padding: 57px 95px 125px 95px;
  background: #fff;
  min-width: 1200px;
  min-height: 825px;
  border-radius: 20px 0px 0px 0px;

  .tiptip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #03bfc6;
    line-height: 20px;
  }

  .width512 {
    width: 440px;
  }

  .content {
    display: flex;
    .left {
      margin-right: 195px;
      .title {
        margin-top: 15px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
        margin-bottom: 20px;
      }

      .hint {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .card {
        margin-top: 160px;
      }
    }
    .right {
      .channel-desc {
        background: #f6f9fb;
        border-radius: 10px;
        padding: 18px 37px;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;

        .channel-img {
          height: 40px;
          padding-right: 45px;
          border-right: 1px solid #e9e9e9;
        }
        .channel-count {
          height: 40px;
          padding-left: 45px;
          .tit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
          }
          .count {
            font-size: 20px;
            font-family: GothamSSm-Medium, GothamSSm;
            font-weight: 500;
            color: #4f595f;
            // margin-top: 3px;
          }
        }
      }
      .mount-desc {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #869daa;
        margin-bottom: 40px;
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }

      :deep(.el-form-item__content) {
        line-height: 20px;
      }
      :deep(.el-upload .el-upload-dragger) {
        width: 440px;
        height: 100px;
      }
      :deep(.el-icon-upload) {
        margin-top: 20px;
        line-height: 20px;
      }
      :deep(.el-upload__text2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }

  .name {
    color: #4f595f;
    font-size: 20px;
  }
  .use {
    height: 22px;
    background: #f0f0f0;
    border-radius: 2px;
    padding: 2px 10px;
    margin-left: 10px;
  }
  .changeBtn {
    width: 287px;
    height: 42px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #869daa;
    line-height: 42px;
    text-align: center;
    color: #869daa;
    margin-top: 20px;
    margin-bottom: 58px;
    cursor: pointer;
  }
  .input_ {
    width: 604px;
  }
  .rules {
    width: 118px;
    height: 32px;
    background: #25b5d9;
    line-height: 32px;
    text-align: center;
    display: inline-block;
    color: #fff;
    cursor: pointer;
  }
}

:deep(.el-input__inner) {
  line-height: 1px !important;
}
:deep(
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button
  ) {
  -webkit-appearance: none;
  margin: 0;
}
</style>
